<template>
	<view class="uni-common-pb uni-padding-wrap uni-common-mt">
		<form @submit="formSubmit" @reset="formReset">
			<view class="uni-form-item uni-row">
				<view class="title">工单编号</view>
				<input class="uni-input" name="workordernumber" v-model="workordernumber" placeholder="请输入工单编号" />
			</view>
			<view class="uni-form-item uni-row">
				<view class="title">规格名</view>
				<input class="uni-input" name="specname" v-model="specname" placeholder="请输入规格名" />
			</view>

			<view class="uni-form-item uni-row">
				<view class="title">所在制程选择</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="index" :range="stepnamelist">
						<view class="uni-input">{{stepnamelist[index]}}</view>
					</picker>
				</view>
			</view>
			<view class="uni-form-item uni-row">
				<button formType="submit">查询</button>
				<button type="default" formType="reset">重置</button>
			</view>
		</form>

		<view v-for="(item,index) in wolist" :key="index" @tap="openinfo" :data-stepid="index">
			<view class="uni-card">
				<view class="uni-card-header">工单编号:{{item.number}}</view>
				<view class="uni-card-content">

					<view class="uni-card-content-inner">
						<view class="uni-flex uni-row">
							当前制程:
							<view class="uni-card-red">
								{{item.step_name}}
							</view>
						</view>
						产品品号:{{item.productname}}<br>
						{{item.issuerecord}}<br>
						{{item.info}}<br>
						{{item.stepnames}}
					</view>
				</view>
				<view class="uni-card-footer">{{item.subtitle}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stepcodelist: [],
				stepnamelist: [],
				index: 1,
				workordernumber: '',
				specname: '',
				step_code: '',
				wolist: [],
			};
		},
		// 跳转到主页面
		onNavigationBarButtonTap(e) {
			uni.reLaunch({
				url: '/pages/mainlogin/mainlogin'
			});

		},
		onLoad(e) {

		},
		onReady: function() {
			uni.request({
				url: this.waiUrl + '/api/workorder/getprocesstype',
				success: (res) => {
					console.log(res.data.data);
					this.stepcodelist[0] = '';
					this.stepnamelist[0] = '无';
					for (var i = 0; i < res.data.data.length; i++) {
						this.stepcodelist[i + 1] = res.data.data[i].daihao;
						this.stepnamelist[i + 1] = res.data.data[i].name + ' ' + res.data.data[i].daihao;
					}
					console.log(this.stepnamelist[3]);
					this.index = 0; //index必需改变页面才会刷新
				},
				fail: (err) => {
					console.log(err);
					uni.showToast({
						title: '获取制程名失败！' + err,
						icon: 'none',
						mask: true,
						duration: 3000
					});
				},
				complete: () => {

				}
			});

		},
		methods: {
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.target.value)
				this.index = e.target.value
			},
			openinfo: function(e) {
				var index = e.currentTarget.dataset.stepid;
				console.log(this.wolist[index].number);
				uni.navigateTo({
					url: '../wodetail/wodetail?ispb=0&workordernumber=' + this.wolist[index].number,
				});
			},
			formReset: function(e) {
				console.log('清空数据')
				this.index = 0;
				this.specname = '';
				this.step_code = '';
			},
			formSubmit: function(e) {
				console.log('form发生了submit事件，携带数据为：' + JSON.stringify(e.detail.value))

				let _this = this;
				this.step_code = this.stepcodelist[this.index];
				console.log(this.step_code + " " + this.workordernumber + " " + this.specname);
				uni.request({
					url: this.waiUrl + '/api/workorder/getworkorderlist',
					data: {
						"workordernumber": this.workordernumber,
						"step_code": this.step_code,
						"specname": this.specname
					},
					success: function(res) {
						_this.wolist = res.data.data;
						// console.log(JSON.stringify(_this.wolist));
					}
				});

			},
		}
	}
</script>

<style>
	button {
		margin-top: 30upx;
		margin-bottom: 30upx;
	}

	.title {
		font-size: 30upx;
		width: 265upx;
	}

	.line-item {
		height: 1upx;
		background: #999999;
		color: #FFF;
	}

	.uni-card-red {
		color: #F76260;
	}
</style>
